<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
  body {
    background: url("image/bjtp.png") no-repeat;
    background-size: cover;
    margin: auto;
    width: 100vw;
    height: 100%;
    position: relative;
    /* overflow-y: hidden; */
    overflow-x: hidden;
  }

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .con,
  .con2,
  .con3 {
    width: 30%;
    margin-right: 2%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;

    
  }

  .item {
    width: 100%;
    /* background-color: red; */
    margin-top: 5px;

  }

  .con {
    /* margin-left: 2vw; */

  }

  .con2 {
    position: relative;
    margin-left: 33vw;
    margin-top: calc(-100vh + -15px);

  }

  .con3 {
    margin-left: 66vw;
    margin-top: calc(-100vh + -15px);

  }

  @media screen and ((min-width:1844PX)) {
    .topRightText {
      margin-left: -20px;
    }

    .topText {
      margin-left: -50px;
    }
  }

  @media screen and ((min-width:1401px) and (max-width:1555px)) {

    .hea {
      display: none;
    }
  }

  @media screen and ((min-width:700px) and (max-width:1844PX)) {

    .con,
    .con2,
    .con3 {
      width: 50%;
    }

    /* .cursor{
     display: none;
    } */
    .con2 {
      margin-left: 50vw;
    }

    .item {
      width: 100%;
    }

    .hea {
      display: none;
    }

    .con3 {
      margin-left: 0;
      margin-top: 100px;
    }
    
  }

  @media screen and ((min-width:100px) and (max-width:950px)) {
    .item {
      width: 100vw;
    }

    .hea {
      display: none;
    }

    .close {
      display: none;
    }

    .con3,
    .con2 {
      margin-left: 0;
      margin-top: 15px;
    }

    .topRightText {
      width: 0 !important;
    }
  }

  #roundpillars {
    margin-top: -20px !important;
    height: 30VH;
    width: 100%;
    margin: auto;

  }

  #synthesis {
    margin-top: -20px !important;
    width: 100%;
    height: 30VH;
    margin: auto;
  }

  #stackeddiagrams {
    height: 40VH;
    width: 100%;
    margin: auto;
  }

  #container {
    height: 30vh;
    width: 100%;
    margin: auto;
  }
  #educate{
    height: 33vh;
    width: 100%;
    margin: auto;
  }
  .rightTable{
        height: 35vh;
        width: 100%;
      /* padding:  173px; ; */
    }
    #main {
        height: 30vh;
        width: 100%;
        margin: auto;
    }
    #increment {
        height: 30vh;
        width: 100%;
        margin: auto;
    }
    #welfare{
        height: 40vh;
        width: 100%;
       margin:auto;
       /* display: inline-block; */
    }
</style>

<body>
  <header>
    <div class="row">
      <div class="col-md-4 hea">
        <img src="image/矩形.png" alt="" class="topJuxing">
        <img src="image/Rectangle 17.png" class="biank">

        <div class="topTitle">贵州院数字化综合运营平台</div>
      </div>
      <img src="image/Rectangle 21.png" class="biank2">
      <div class="col-md-1 topText"><img src="image/Rectangle 4034.png" class="topText2"><span
          class="cursor">门户首页</span></div>
      <div class="col-md-1 topText"><img src="image/Rectangle 4034.png" class="topText2"><span
          class="cursor">办公中心</span></div>
      <div class="col-md-1 topText"><img src="image/Rectangle 4034.png" class="topText2"><span
          class="cursor">数据中心</span></div>
      <div class="col-md-1 topText"><img src="image/Rectangle 4034.png" class="topText2"><span
          class="cursor">标准知识库</span></div>
      <div class="col-md-1 col-md-offset-3 topRightText"><img src="image/Frame.png"> <span
          class="cursor close">我的待办</span>
      </div>
      <div class="col-md-1 col-md-offset-1 topRightText"><img src="image/Frame (1).png"><span
          class="cursor close">我的已办</span>
      </div>
      <div class="col-md-1 col-md-offset-1 topRightText"><img src="image/Frame (2).png"> <span
          class="cursor close">我的消息</span></div>
      <div class="col-md-1 col-md-offset-3 topRightText"><span class="cursor close">郭旗</span></div>
    </div>
  </header>
  <div class="con">
    <div class="item" style=" height: 30vh; ">
      <div class="searchBox">
        <p class="textK">收入总额</p>
        <span class="Dborder"></span>
        <input class="elementD" type="date">
        <input class="elementD" type="date" id="finalD">
        <select class="elementD" id="performance">
          <option>全体员工</option>
        </select>
        <a class="elementD backF">图形放大</a>
        <div id="spot"></div>
        <div id="bottomLine"></div>
        <div id="blueFast"></div>
      </div>
      <div id="roundpillars"></div>
    </div>
    <div class="item" style=" height: 30vh;">
      <div class="searchBox">
        <p class="textK">综合统计</p>
        <span class="Dborder"></span>
        <input class="elementD" type="date">
        <input class="elementD" type="date" id="finalD">
        <select class="elementD" id="performance">
          <option>全体员工</option>
        </select>
        <a class="elementD backF">图形放大</a>
        <div id="spot"></div>
        <div id="bottomLine"></div>
        <div id="blueFast"></div>
      </div>
      <div id="synthesis"></div>
    </div>
    <div class="item" style=" height: 40vh;">
      <div class="searchBox">
        <p class="textK">绩效分配</p>
        <span class="Dborder"></span>
        <input class="elementD" type="date">
        <input class="elementD" type="date" id="finalD">
        <select class="elementD" id="performance">
          <option>全体员工</option>
        </select>
        <a class="elementD backF">图形放大</a>
        <div id="spot"></div>
        <div id="bottomLine"></div>
        <div id="blueFast"></div>
      </div>
      <div id="stackeddiagrams"></div>
    </div>
  </div>
  <div class="con2">
    <div class="item" style=" height: 40vh;">
      <div class="searchBox">
        <p class="textK">保险缴纳</p>
        <span class="Dborder"></span>
        <input class="elementD" type="date">
        <input class="elementD" type="date" id="finalD">
        <select class="elementD" id="performance">
          <option>全体员工</option>
        </select>
        <a class="elementD backF">图形放大</a>
        <div id="spot"></div>
        <div id="bottomLine"></div>
        <div id="blueFast"></div>
      </div>
      <div style="position: relative;">
        <img id="bj1" src="./image/Rectangle 24@2x.png">
        <img id="bj2" src="./image/Rectangle 24@2x.png">
        <img id="bj3" src="./image/Rectangle 24@2x.png">
        <img id="bj4" src="./image/Rectangle 24@2x.png">
        <div id="container"></div>
      </div>
     
    </div>
    <div class="item" style=" height: 30vh;">
      <div class="searchBox">
        <p class="textK">教育培训</p>
        <span class="Dborder"></span>
        <input class="elementD" type="date">
        <input class="elementD" type="date" id="finalD">
        <select class="elementD" id="performance">
          <option>全体员工</option>
        </select>
        <a class="elementD backF">图形放大</a>
        <div id="spot"></div>
        <div id="bottomLine"></div>
        <div id="blueFast"></div>
      </div>
      <div id="educate"></div>
    </div>
    <div class="item" style=" height: 30vh;">
      <div class="searchBox">
        <p class="textK">人工成本</p>
        <span class="Dborder"></span>
        <input class="elementD" type="date">
        <input class="elementD" type="date" id="finalD">
        <select class="elementD" id="performance">
          <option>全体员工</option>
        </select>
        <a class="elementD backF">图形放大</a>
        <div id="spot"></div>
        <div id="bottomLine"></div>
        <div id="blueFast"></div>
      </div>
      <div style="position: relative;">
        <img src="image/Rectangle.png" alt="" style="position: absolute; top: 11px;left: 20px;">
        <img src="image/Rectangle.png" alt="" style="position: absolute; top:114px;left: 20px;">
        <img src="image/Rectangle.png" alt="" style="position: absolute; top: 240px; left: 20px;">
        <img src="image/Rectangle.png" alt="" style="position: absolute; top: 40px;left: 219px;">
        <img src="image/Rectangle.png" alt="" style="position: absolute; top: 176px;left: 219px;">
        <div class="rightTable" id="option"></div>
      </div>
    
    </div>
  </div>
  <div class="con3">
    <div class="searchBox">
      <p class="textK">保险缴纳</p>
      <span class="Dborder"></span>
      <input class="elementD" type="date">
      <input class="elementD" type="date" id="finalD">
      <select class="elementD" id="performance">
        <option>全体员工</option>
      </select>
      <a class="elementD backF">图形放大</a>
      <div id="spot"></div>
      <div id="bottomLine"></div>
      <div id="blueFast"></div>
    </div>
    <div class="item" style=" height: 30vh;">
      <div id="main"></div>
    </div>
    <div class="item" style=" height: 30vh; ">
      <div class="searchBox">
        <p class="textK">保险缴纳</p>
        <span class="Dborder"></span>
        <input class="elementD" type="date">
        <input class="elementD" type="date" id="finalD">
        <select class="elementD" id="performance">
          <option>全体员工</option>
        </select>
        <a class="elementD backF">图形放大</a>
        <div id="spot"></div>
        <div id="bottomLine"></div>
        <div id="blueFast"></div>
      </div>
      <div id="increment"></div>
    </div>
    <div class="item" style=" height: 40vh; ">
      <div class="searchBox">
        <p class="textK">福利发放</p>
        <span class="Dborder"></span>
        <input class="elementD" type="date">
        <input class="elementD" type="date" id="finalD">
        <select class="elementD" id="performance">
          <option>全体员工</option>
        </select>
        <a class="elementD backF">图形放大</a>
        <div id="spot"></div>
        <div id="bottomLine"></div>
        <div id="blueFast"></div>
      </div>
      <div class="col-md-3 " id="bing">
        <img class="juxing" src="image/Rectangle.png" alt="">
        <img class="juxing ju2" src="image/Rectangle.png" alt="">
        <div id="welfare"></div>
    </div>
  </div>
</body>
<script type="text/javascript" src="js/echarts5.4.4.min.js"></script>
<script src="js/sumjs.js"></script>


<script>
  // 收入总额柱状图
  getroundpillars("roundpillars");
  // 保险缴纳饼状图
  getcontainer("container");
  // 保险缴纳折线图
  getmin("main");
  // 综合统计
  getsynthesis("synthesis");
  // 绩效分配堆叠图
  getstackeddiagrams("stackeddiagrams");
  // 公积金
  getincrement("increment");
  // 福利发放
  getwelfare("welfare");
  // 人工成本
  getrightTable("option");
  // 教育培训
  geteducate("educate");

</script>
<script>

  window.addEventListener('mousewheel', function (event) {
    if (event.ctrlKey === true || event.metaKey) {
      event.preventDefault();
    }
  }, { passive: false });

  //firefox
  window.addEventListener('DOMMouseScroll', function (event) {
    if (event.ctrlKey === true || event.metaKey) {
      event.preventDefault();
    }
  }, { passive: false });

</script>

</html>